<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="menu_header">
          <div class="title">
            <h3>步尚集小程序管理系统</h3>
          </div>
          <div class="icon" @click="isCollapse = !isCollapse">
            <el-icon :style="{ color: isCollapse? '#bdc3c7' : '#ecf0f1' }">
              <Menu />
            </el-icon>
          </div>
          <div class="right">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                {{ store.username }}
                <el-icon><ArrowDownBold /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="index">首页</el-dropdown-item>
                  <el-dropdown-item command="exit">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>

      <el-container>
        <el-aside :width="isCollapse? '64px' : '200px'">
          <transition>
            <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              :default-active="defUrl"
              text-color="#fff"
              :collapse="isCollapse"
              unique-opened
            >
              <el-menu-item index="/index"  @click="goToIndex">
                <el-icon><Menu /></el-icon> <!-- 修改为已导入的 Menu 图标 -->
                <span>首页</span>
              </el-menu-item>
              <el-sub-menu index="defUrl">
                <template #title>
                  <el-icon><Menu /></el-icon> <!-- 修改为已导入的 Menu 图标 -->
                  <span>商品管理</span>
                </template>
                <el-menu-item index="/addProducts" @click="add">添加商品</el-menu-item>
                <el-menu-item index="/productsList" @click="list">商品列表</el-menu-item>
              </el-sub-menu>
            </el-menu>
          </transition>
        </el-aside>
        <el-main> 
          <router-view>

          </router-view> 
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script setup lang="ts">
import { ArrowDownBold, Menu } from "@element-plus/icons-vue";
import { ref } from "vue";
import { useStore } from "../store/user";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const isCollapse = ref(false);

// 菜单默认展开
const defUrl = ref("/index");
// 刷新时默认展开对应菜单
const route = useRoute();
const router = useRouter();
defUrl.value = route.path;

const store = useStore();

const handleCommand = (command: string) => {
  if (command === "index") {
    router.push("/index");
  } else if (command === "exit") {
    localStorage.removeItem("token");
    store.username = "";
    router.push("/login");
    ElMessage.success("退出成功！");
  }
};

const goToIndex = () => {
  router.push("/index");
};
const list = () => {
  router.push("/productsList");
};
const add = () => {
  router.push("/addProducts");
};
</script>




<style lang="less" scoped>
.home {
  height: 100vh; /* 修改为 100vh */
  background-color: #ffffff;
  :deep(.el-header) {
    height: 70px;
    background-color: #389bfe;
  }
  :deep(.el-aside) {
    background-color: #545c64;
    height: calc(100vh - 70px);
    transition: width 0.5s ease;
  }
  :deep(.el-dropdown) {
    color: #fff;
  }
  :deep(.el-menu) {
    border: 0;
  }
}
.menu_header {
  height: 100%;
  display: flex;
  align-items: center;
  .icon {
    color: #fff;
    font-size: 20px;
    margin: 0 5px;
    margin-top: 6px;
  }
  .title {
    color: #ffffff;
    margin: 0 5px;
  }
  .right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
}

.box {
  height: 100px;
  background-color: lightblue;
}
</style>